<template>
	<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
		<!-- 	<view class="head">
			<view class="contanier">
				<view class="headtext">
					<text>邀请的好友越多</text>
					<text class="subtitle">我的收益越高</text>
				</view>
				<view class="headimg">
					
				</view>
			</view>
		</view> -->
		<!-- <view class="invitehead">
			
			
		</view> -->
		<view class="item-box">
			<!-- <view class="box-content" style="background-color: none;">
					<navigator url="/pages/bonus/invitelist" class="share-top">
						<view>我的好友：{{apprenticeInfo.aDays.people}}</view>
						<view class="icon iconfont">&#xe616;</view>
					</navigator>
					<view class="share-bottom">
						<navigator url="/pages/bonus/share" class="share-buttons">一起赚钱</navigator>
					</view> 
				</view> -->
			<view style="height: 225rpx;"></view>
			<view class="invitebox">
				<view class="userbox">
					<view class="userinfo">
						<view class="userleft">
							<image :src="userinfo.avatar" mode="aspectFill"></image>
						</view>
						<view class="userright">
							<text class="nickname">{{userinfo.nickname}}</text>
							<view class="level" v-if="parseInt(userinfo.level)">{{levelbox[userinfo.level]}}</view>
						</view>
					</view>
					<view class="invitecode">邀请码：{{userinfo.recommend_id}}</view> 
				</view>
				<view class="self-friend">
					<navigator url="/pages/bonus/invitelist" class="frienditem1">
						<view class="total-friend">{{apprenticeInfo.friend.total}}</view>
						<view>我的好友（人）</view>
					</navigator>
					<navigator url="/pages/bonus/invitelist"  class="frienditem2">
						<view class="count-friend">{{apprenticeInfo.friend.today}}</view>
						<view>今日新增</view>
					</navigator>
					<navigator url="/pages/bonus/invitelist"  class="frienditem2">
						<view class="count-friend">{{apprenticeInfo.friend.yesterday}}</view>
						<view>昨日新增</view>
					</navigator>
				</view>
				
				<view class="inviteshare">
					<view>邀请越多的好友，收益的越高</view>
					<navigator url="/pages/bonus/share" class="invite-button">一起赚钱</navigator>
				</view>
				
			</view>
			<view class="box-content">
				<view class="share-top">
					<text>好友累计给我赚钱</text>
					<navigator url="/pages/article/index?key=apprenticeContribution" class="rule">
						<text>玩法规则</text>
						<view class="icon iconfont">&#xe616;</view>
					</navigator>
				</view>
				<view class="share-bottom">
					<view class="income">
						<view class="income-item">
							<text style="color: red;">{{apprenticeInfo.total.amount}}元</text>
							<text class="samllfont">当前阶段总收入</text>
						</view>
						<view class="income-item">
							<text>{{apprenticeInfo.total.threshold}}元</text>
							<text class="samllfont">第一阶段X{{apprenticeInfo.total.multiple}}倍加速</text>
						</view>
					</view>
					<!--进度条显示-->
					<view class="proroll"></view>
					<!--结算进度-->
					<view class="unlockprogress" :style="{width:((apprenticeInfo.total.amount/apprenticeInfo.total.threshold)*100).toFixed(2)+'%' }"> </view>
					<view class="unlock">已解锁{{((apprenticeInfo.total.amount/apprenticeInfo.total.threshold)*100).toFixed(2)}}%，解锁后{{apprenticeInfo.total.threshold}}元现金将自动存入钱包</view>
				</view>
			</view>

			<view class="box-content">
				<view class="share-top">
					<text>今日好友给我贡献</text>
				</view>
				<view class="share-bottom">
					<view class="income">
						<view class="income-item">
							<text style="color: red;">{{apprenticeInfo.aDays.count}}元</text>
							<text class="samllfont">合计</text>
						</view>
						<view class="income-item">
							<text>{{apprenticeInfo.aDays.level1}}元</text>
							<text class="samllfont">直邀好友贡献</text>
						</view>
						<view class="income-item">
							<text>{{apprenticeInfo.aDays.level2}}元</text>
							<text class="samllfont">扩散好友贡献</text>
						</view>
					</view>
				</view>
			</view>

			<!--我的上级-->
			<view class="box-content">
				<view class="share-top">
					<text>我的邀请人</text>
					<view class="rule" v-if="!apprenticeInfo.myInvite.id" @click="inviteshow=true">
						<text>填写邀请人</text>
						<view class="icon iconfont">&#xe616;</view>
					</view>
				</view>
				<view class="share-bottom">
					<view :class="['master',!apprenticeInfo.myInvite.id?'mastercenter':'']">
						<image :src="apprenticeInfo.myInvite.avatar?apprenticeInfo.myInvite.avatar:'/static/image/undetermined.png'" mode="aspectFill"
						 @click="inviteadd"></image>
						<view v-if="apprenticeInfo.myInvite.id">他(她)邀请了{{apprenticeInfo.myInvite.countPromote}}人，累计收益<text style="color: red;">{{apprenticeInfo.myInvite.commission}}</text>元</view>
					</view>
				</view>
			</view>
		</view>
		<complaint></complaint>
		<!--填写邀请人-->
		<alert modeltitle="填写邀请人" :visible="inviteshow">
			<view class="inputcode">
				<form @submit="formSubmit">
					<input @input="inputcharge" :value="codeinfo" style="border-bottom: 1rpx solid #F1F1F1;" name="code" type="text" maxlength="8" placeholder="输入邀请码" />
					<button formType="submit" type="primary" class="invitebutton" style="height: 80rpx;">提交</button>
				</form>
			</view>
		</alert>
	</mescroll-body>
</template>

<script>
	/**
	 * 佣金分红
	 */
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				
				userinfo: uni.getStorageSync('user_info'),
				inviteshow: false,
				apprenticeInfo: {
					"friend": {
						"total": 0,
						"today": 0,
						"yesterday": 0
					},
					total: {
						amount: "0.00",
						multiple: "0.00",
						threshold: "0.00"
					},
					aDays: {
						count: "0.00",
						level1: "0.00",
						level2: "0.00",
						people: "0"
					},
					myInvite: {
						avatar: '',
						nickname: '',
						commission: 0,
						countPromote: 0,
					}
				},
				//下拉参数配置
				downOption: {
					auto: true, //是否在初始化后,自动执行downCallback; 默认true
					// bgColor: "url(/static/image/top-bg.png)",
					// bgColor:"#378aff",
					textColor: "#fff",
					textLoading: '玩命加载中...',
					autoShowLoading: true, //自动执行一次下来
				},
				// //上拉参数配置
				upOption: {
					use: false
				},
				levelbox:['','白银会员','黄金会员','钻石会员'],
				ulockgrposs:'0%',
				codeinfo:"",
			}
		},
		onLoad(options) {
			console.log(this.userinfo);
			uni.$on("closewindown", (option) => {
				//关闭alret提示框
				this.inviteshow = option;
			})
			//更新app图标红点
			this.$redpoint(options);
		},
		methods: {
			//强制装换大小写
			inputcharge(e){
				this.codeinfo = e.detail.value.replace(/[^0-9a-zA-Z]/g, '').toUpperCase();
			},
			//添加邀请人
			inviteadd() {
				if (!this.apprenticeInfo.myInvite.id) {
					this.inviteshow = true;
				}
			},

			//用户邀请绑定
			formSubmit(e) {
				let code = e.detail.value.code;
				if (!code) {
					this.$ShowMsg('邀请码不能为空！');
					return;
				}
				this.$HttRequest({
					url: '/promote/fillIn',
					param: {
						code: code,
					}
				}, 'POST').then((res) => {
					console.log(res);
					if (res.status === 10000) {
						//更新内存的邀请人
						let userInfo = uni.getStorageSync('user_info');
						userInfo.promote = res.data;
						uni.setStorageSync('user_info', userInfo);
						//更新当前页面邀请人
						this.apprenticeInfo.myInvite = res.data;
						//提示
						this.$ShowMsg('绑邀请人成功！');
						this.inviteshow = false;
					} else {
						this.$ShowMsg(res.message);
						this.inviteshow = false;
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg);
				});
			},
			
			

			/*下拉刷新的回调 */
			downCallback() {
				this.$HttRequest({
					url: '/promote/income',
					param: ''
				}).then((res) => {
					console.log(res.data)
					if (res.status === 10000) {
						this.apprenticeInfo = res.data
						//更新进度条
						//this.ulockgrposs = apprenticeInfo.total.amount/apprenticeInfo.total.threshold
					} else {
						this.$ShowMsg(res.message)
					}
					this.mescroll.endSuccess();
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error);
					console.log(error)
					this.mescroll.error();
				});
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				console.log(page);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-image: url('/static/image/invitetop.png');
		background-repeat: no-repeat;
		background-size: 100% 463rpx;
		background-position: top;
		background-color: #f0f0f0;
	}

	//邀请码文本框
	.inputcode {
		margin-top: 30rpx;
	}

	.invitebutton {
		color: #fff;
		font-size: 30rpx;
		margin: 20rpx auto;
		margin-top: 30rpx;
		background-color: $uni-color-primary;
		width: 100%;
		display: flex;
		justify-content: center;
		height: 85rpx;
		border-radius: 20rpx;
		align-items: center;

	}

	
	.item-box {
		width: 100vw;
		display: flex;
		justify-content: center;
		flex-direction: column;

		.invitebox {
			margin: 20rpx auto;
			margin-top: 10rpx;
			height: 330rpx;
			width: 90%;
			background-image: url('/static/image/yaoqi.png');
			background-repeat: no-repeat;
			background-size: 100% 330rpx;
			//分享按钮
			.inviteshare{
				color: #6c3700;
				font-size: 28rpx;
				margin: 0 auto;
				margin-top:30rpx;
				width: 88%;
				display: flex;
				justify-content:space-between;
				align-items: center;
				.invite-button{
					width: 150rpx;
					height: 50rpx;
					background-color: $uni-color-primary;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 35rpx;
					color: #fff;
					
				}
			}
			//我的好友
			.self-friend {
				font-weight: bold;
				color: #d6922a;
				width: 88%;
				margin: 20rpx auto;
				margin-top: 40rpx;
				justify-content: space-around;
				display: flex;
				align-items: center;
				font-size: 28rpx;

				.frienditem1 {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					.total-friend {
						color: #6c3700;
						font-size: 35rpx;
					}
				}

				.frienditem2 {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					.count-friend {
						color: #6c3700;

					}
				}
			}

			.userbox {
				width: 85%;
				margin: 20rpx auto;
				margin-top: 30rpx;
				color: #6c3700;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				font-weight: bold;

				.userinfo {
					display: flex;
					justify-content: center;
					align-items: center;

					.userleft {
						border-radius: 50%;
						border: 1rpx solid #ff9309;
						width: 75rpx;
						height: 75rpx;

						image {
							border-radius: 50%;
							width: 75rpx;
							height: 75rpx;
						}
					}

					.userright {
						margin-left: 20rpx;
						display: flex;
						justify-content: center;
						align-items: flex-start;
						flex-direction: column;
						
						width: 220rpx;
						.nickname {
							
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							width: 100%;
							font-size: 32rpx;
						}

						.level {
							background-color: rgba(#ff930a, 0.3);
							font-size: 22rpx;
							color: #f96261;
							border-radius: 35rpx;
							padding: 5rpx 20rpx;
						}
					}
				}

				.invitecode {
					
				}
			}
		}

		.box-content {
			width: 80%;
			margin: 10rpx auto;
			background-color: #fff;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			padding: 20rpx 40rpx;


			.share-top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex: 1;
				font-size: 35rpx;
				color: #333333;
				margin-bottom: 20rpx;

				.iconfont {
					color: #c2c2c2;
					font-size: 25rpx;
					margin-left: 15rpx;
				}

				.rule {
					display: flex;
					justify-content: center;
					align-items: center;

					text {
						font-size: 28rpx;
						color: #c2c2c2;
					}
				}
			}

			.share-bottom {
				flex: 1;
				display: flex;
				justify-content: center;
				flex-direction: column;
				position: relative;
				.proroll {
					width: 100%;
					height: 10rpx;
					border-radius: 15rpx;
					background-color: #f0f0f0;
					margin-bottom: 10rpx;
				}
				.unlock {
					display: flex;
					justify-content: center;
					align-items: center;
					color: #c2c2c2;
					font-size: 25rpx;
					font-weight: normal;
					margin-bottom: 20rpx;
				}
				.unlockprogress{
					position: absolute;
					bottom: 65rpx;
					
					height: 10rpx;
					border-radius: 15rpx;
					background-color: $uni-color-primary;
					z-index: 99;
				}
				.master {
					margin: 20rpx 0;
					font-size: 28rpx;
					color: #c2c2c2;
					flex: 1;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					image {
						box-shadow: 0 0 15rpx #F1F1F1;
						width: 75rpx;
						height: 75rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}
				}

				.mastercenter {
					justify-content: center;

					image {
						width: 150rpx;
						height: 150rpx;
					}
				}

				.speeds {
					background-color: #f0f0f0;
					flex: 1;
					height: 2rpx;
					margin: 25rpx 0;
					border-radius: 20rpx;
				}

				.income {
					flex: 1;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 40rpx;
					font-weight: bold;
					color: #333333;
					margin: 20rpx 0;

					.income-item {
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;

						.samllfont {
							color: #c2c2c2;
							font-size: 25rpx;
							font-weight: normal;
						}
					}
				}

				

				.share-buttons {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 90rpx;
					margin: 20rpx 0;
					margin-top: 40rpx;
					color: #fff;
					width: 100%;
					font-size: 32rpx;
					border-radius: 20rpx;
					background-color: $uni-color-primary;
					font-weight: bold;
				}
			}
		}
	}

	.head {
		flex: 1;
		height: 200rpx;
		background-color: $uni-color-primary;
		position: relative;
		font-size: 35rpx;
		color: #fff;
		z-index: -1;

		.contanier {
			top: 30rpx;
			position: absolute;
			z-index: 99;
			flex: 1;
			padding: 20rpx;
			position: absolute;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.headtext {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				margin-left: 20rpx;

				.subtitle {
					font-size: 45rpx;
					font-weight: bold;
				}
			}

			.headimg {}
		}
	}

	.head::after {
		content: '';
		width: 140%;
		position: absolute;
		height: 150rpx;
		border-radius: 0 0 50% 50%;
		top: 120rpx;
		left: -180rpx;

		background-color: $uni-color-primary;
	}

	.invitehead {
		flex: 1;
		height: 463rpx;
		background-image: url('/static/image/invitetop.png');
		background-repeat: no-repeat;
		background-size: 100% 463rpx;

	}
</style>
